<template>
  <div>
    <div>
      <div class="header flex">
        <el-select v-model="value" placeholder="请选择" v-if="$store.getters.isShow">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
        <el-input v-model="month"  placeholder="工资月份:2022-12" style="width:200px" v-if="$store.getters.isShow"></el-input>
        <el-button @click="search()" type="primary" v-if="$store.getters.isShow">查询</el-button>
        <el-button @click="cleartIn()" type="primary" v-if="$store.getters.isShow">重置</el-button>
        <!-- 弹框  新增-->
        <el-popover placement="top" width="580" v-model="visible" title="新增">
          <p>
            <!-- 弹出框的内容 -->
            <el-form
              :model="ruleForm"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm" >
              <el-form-item label="员工姓名" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="所属部门" prop="name">
                <el-select v-model="ruleForm.value" placeholder="请选择">
    <el-option
      v-for="item in ruleForm.deptName"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>              </el-form-item>

              <el-form-item label="工资月份" prop="name">
                <el-input  placeholder="月份" v-model="ruleForm.month"></el-input>
              </el-form-item>
              <el-form-item label="基本工资" prop="name">
                <el-input  placeholder="基本工资" v-model="ruleForm.basePay"></el-input>
              </el-form-item>
              <!-- 学历 -->
              <el-form-item label="全勤工资" prop="name">
                <el-input placeholder="全勤工资" v-model="ruleForm.fullPay"></el-input>
              </el-form-item>
              <el-form-item label="迟到扣款" prop="name">
                <el-input placeholder="迟到扣款" v-model="ruleForm.late"></el-input>
              </el-form-item>
              <el-form-item label="请假扣款" prop="name">
                <el-input placeholder="请假扣款" v-model="ruleForm.leavePay"></el-input>
              </el-form-item>
              <el-form-item label="绩效奖金" prop="name">
                <el-input placeholder="绩效" v-model="ruleForm.kpiPay"></el-input>
              </el-form-item>
              <el-form-item label="个税扣款" prop="name">
                <el-input placeholder="个税扣款" v-model="ruleForm.IncomeTax"></el-input>
              </el-form-item>
              <el-form-item label="五险一金" prop="name">
                <el-input placeholder="请输入" v-model="ruleForm.insurance"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm(ruleForm)" >立即创建</el-button >
                  <el-button type="primary" @click="cls">取消</el-button >
              </el-form-item>
            </el-form>
          </p>
          <!-- 新增按钮 -->
        </el-popover>
      </div>
      <div class="flex" style="width:100%;justify-content: end;">
        <el-button type="primary" @click="add()" v-if="$store.getters.isShow">新增</el-button>
        <el-button type="danger" @click="clear()" v-if="$store.getters.isShow">删除</el-button>
      </div>
      <!-- 下面表格 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <!-- 单选全选 点击按钮 -->
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="员工姓名" width="120">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column prop="name" label="所属部门" width="120">
          <template slot-scope="scope">{{ scope.row.deptName }}</template>
        </el-table-column>
        <el-table-column prop="address" label="工资月份" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.month }}</template>
        </el-table-column>
        <el-table-column label="基本工资" width="120">
          <template slot-scope="scope">{{ scope.row.basePay }}</template>
        </el-table-column>
        <el-table-column prop="name" label="全勤工资" width="120">
          <template slot-scope="scope">{{ scope.row.fullPay }}</template>
        </el-table-column>
        <el-table-column prop="address" label="迟到扣款" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.late }}</template>
        </el-table-column>
        <el-table-column label="请假扣款" width="120">
          <template slot-scope="scope">{{ scope.row.leavePay  }}</template>
        </el-table-column>
        <el-table-column prop="name" label="绩效奖金" width="120">
          <template slot-scope="scope">{{ scope.row.kpiPay }}</template>
        </el-table-column>
        <el-table-column prop="address" label="个税扣款" width="120">
          <template slot-scope="scope">{{ scope.row.incomeTax }}</template>
        </el-table-column>
        <el-table-column prop="address" label="五险一金" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.insurance }}</template>
        </el-table-column>
        <el-table-column prop="address" label="创建时间" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column label="操作" v-if="$store.getters.isShow && this.isShow">
      <template slot-scope="scope">
        <el-button
          size="60"
          @click="handleEdit(scope.row)">编辑</el-button>
      </template>
      </el-table-column>
      </el-table>
      <!-- 修改 -->
      <el-dialog title="修改" :visible.sync="dialogFormVisible">
        <el-form
              :model="ruleForm2"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm" >
              <el-form-item label="员工姓名" prop="name">
                <el-input v-model="ruleForm2.name"></el-input>
              </el-form-item>
              <el-form-item label="所属部门" prop="name">
                <el-select v-model="ruleForm2.deptName" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
              </el-form-item>
              <el-form-item label="工资月份" prop="name">
                <el-input  placeholder="月份" v-model="ruleForm2.month"></el-input>
              </el-form-item>
              <el-form-item label="基本工资" prop="name">
                <el-input  placeholder="基本工资" v-model="ruleForm2.basePay"></el-input>
              </el-form-item>
              <!-- 学历 -->
              <el-form-item label="全勤工资" prop="name">
                <el-input placeholder="全勤工资" v-model="ruleForm2.fullPay"></el-input>
              </el-form-item>
              <el-form-item label="迟到扣款" prop="name">
                <el-input placeholder="迟到扣款" v-model="ruleForm2.late"></el-input>
              </el-form-item>
              <el-form-item label="请假扣款" prop="name">
                <el-input placeholder="请假扣款" v-model="ruleForm2.leavePay"></el-input>
              </el-form-item>
              <el-form-item label="绩效奖金" prop="name">
                <el-input placeholder="绩效" v-model="ruleForm2.kpiPay"></el-input>
              </el-form-item>
              <el-form-item label="个税扣款" prop="name">
                <el-input placeholder="个税扣款" v-model="ruleForm2.incomeTax"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm2(ruleForm2)" >确定修改</el-button >
                  <el-button type="primary" @click="cls2" >取消修改</el-button >
              </el-form-item>
            </el-form>
</el-dialog>
      <Pagin :count="total" @pageEvent="fetchData" :pageSize="pageSize"></Pagin>
    </div>
  </div>
</template>

<script>
import{wageListAPI,addWageAPI,getUpdateAPI,delectWageAPI,seachAPI,depListAPI}from '../../api/look'
// import {chabuList} from '../../api/4-1_staffInfo'
export default {
  data() {
    return {
      ruleForm: {
        name : '',
        value:'',
        deptName : [], //部门
          month : '', // 月份
          basePay : '', //基本
          fullPay : '', //全勤
          late : '',  //迟到
          leavePay : '',  //请假
          kpiPay : '',  //绩效
          IncomeTax : '',  //个税
          insurance : '', //保险
      },
      options :[],
      value:'', // 所属部门
      ruleForm2: {},//修改
      visible: false,
      dialogFormVisible: false,
      month:''  ,
      dataList:[],
      total: 0, // 列表总行数
        currentPage: 1,
        pageSize: 10,
      tableData: [],
      multipleSelection: [],
      isShow :""
    };
  },
  created(){
    this.jia()
    this.bumen()
    if(this.$store.getters.role == 'hr'){
      this.isShow = false
    }else{
      this.isShow = true
    }
  },
  components: {
    Pagin: () => import('c/Pagin')
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    //重置
    cleartIn(){
      this.month =''
      this.value = ''
    },
    //查询
    async search(){
      const res = await seachAPI({
        deptName :this.value,
        month :this.month
      })
      if(res.code == '1'){
        if(res.data != null){
          this.dataList = res.data
          this.total = this.dataList.length
          this.fetchData(this.currentPage)
          this.$message.success(res.msg)
        }
      }else{
          this.$message.error(res.msg)
        }

    },
  async submitForm(form) {
      //请求成功后
      const res = await addWageAPI({
          name : form.name,
          month : form.month, // 月份
          basePay : form.basePay, //基本
          fullPay : form.fullPay, //全勤
          late : form.late,  //迟到
          leavePay : form.leavePay, //请假
          kpiPay : form.kpiPay, //绩效
          IncomeTax : form.IncomeTax, //个税
          insurance : form.insurance, //保险
      })
      if(res.code == '1'){
        this.jia()
        this.$message.success('添加成功')
      }else{
        this.$message.success('添加失败')
      }
      //关闭
      this.visible = false
    },
    //删除
   async clear(){
      var id = []
      this.multipleSelection.forEach(item=>{
         id.push(item.id)
      })
      //请求成功后
      if(id.length > 0){
        const res = await delectWageAPI(id)
        if(res.code == '1'){
        this.jia()
        this.$message.success('删除成功')
      }else{
        this.$message.success('删除失败')
      }

      }

    },
    //编辑
    handleEdit(row){
      if(!this.$store.getters.isShow){
        this.$message.error('权限不足')
      }else{
         this.dialogFormVisible = true
         this.ruleForm2 = row
      }

    },
   async submitForm2(form){
      this.dialogFormVisible = false
        // console.log(form);
        const res = await getUpdateAPI({
          name : form.name,
          month : form.month, // 月份
          basePay : form.basePay, //基本
          fullPay : form.fullPay, //全勤
          late : form.late,  //迟到
          leavePay : form.leavePay, //请假
          kpiPay : form.kpiPay, //绩效
          IncomeTax : form.IncomeTax, //个税
          insurance : form.insurance, //保险
          id : form.id
        })
        if(res.code == '1'){
        this.jia()
        this.$message.success('修改成功')
      }else{
        this.$message.success('修改失败')
      }
    },
    //新增
    add(){
      this.visible = true
    },
    //模拟假数据
   async jia(){
      const res = await wageListAPI()
      this.dataList = res.data
      this.total = this.dataList.length
      this.fetchData(this.currentPage)
    },
    //获取部门
    async bumen(){
      const res2 = await depListAPI()
      // console.log(res2);
      var arr = []
      res2.data.forEach(item=>{
        var obj = {value:item,label:item}
        arr.push(obj)

      })
      this.options = arr
      this.ruleForm.deptName = arr
    },
    cls(){
      this.visible = false
    },
    cls2(){
      this.visible2 = false
    },
    fetchData (count) {
      var list = this.dataList
      var from = (count - 1) * this.pageSize
      const to = count * this.pageSize
      this.tableData = []
      for (; from < to; from++) {
        if (list[from]) {
          this.tableData.push(list[from])
        }
      }
    },
  },
};
</script>
<style scoped lang="scss">
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.input {
  width: 120px;
}
.header {
  width: 40%;
  // border-bottom: 1px solid #e0e0e0;
  padding: 20px 0;
}
</style>
